<template>
  <div class="performance-container">
  <!-- <div ref="chart" style="height: 21vh; width: 100%"></div> -->
    <div class="page-header">
      <router-link class="back-link" to="/main/renshi">
        <i class="el-icon-arrow-left"></i>
        返回
      </router-link>
      <h1>绩效考核管理</h1>
    </div>

    <div class="content-wrapper">
      <div class="section-header">
        <div class="section-title">
          <i class="el-icon-data-line"></i>
          <span>绩效考核表单</span>
        </div>
        <div class="section-desc">员工绩效评估与管理</div>
      </div>

      <div class="form-grid">
        <router-link class="form-item" to="/main/renshi/jixiao/nianyue">
          <div class="item-icon">
            <i class="el-icon-date"></i>
          </div>
          <div class="item-content">
            <h3>年月工作计划与考核表</h3>
            <p>制定和评估月度、年度工作目标</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/renshi/jixiao/jixiaojilu">
          <div class="item-icon">
            <i class="el-icon-chat-dot-round"></i>
          </div>
          <div class="item-content">
            <h3>绩效面谈记录表</h3>
            <p>记录绩效面谈过程和结果</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/renshi/jixiao/jxshensu">
          <div class="item-icon">
            <i class="el-icon-document-checked"></i>
          </div>
          <div class="item-content">
            <h3>绩效考评申诉表</h3>
            <p>处理绩效评估相关申诉</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/renshi/jixiao/jxjjshenqin">
          <div class="item-icon">
            <i class="el-icon-wallet"></i>
          </div>
          <div class="item-content">
            <h3>绩效奖金申请单</h3>
            <p>申请和发放绩效奖金</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/renshi/jixiao/xzyidong">
          <div class="item-icon">
            <i class="el-icon-money"></i>
          </div>
          <div class="item-content">
            <h3>职位薪资异动申请表</h3>
            <p>处理职位调整和薪资变更</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/biao/jixiaoxz">
          <div class="item-icon">
            <i class="el-icon-money"></i>
          </div>
          <div class="item-content">
            <h3>职员绩效薪资核定表</h3>
            <p>职员绩效薪资核定表</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/renshi/jixiao/jxjiangjjs">
          <div class="item-icon">
            <i class="el-icon-guide"></i>
          </div>
          <div class="item-content">
            <h3>绩效奖金基数报批表</h3>
            <p>绩效奖金基数报批表</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/renshi/jixiao/jixiaoxize">
          <div class="item-icon">
            <i class="el-icon-guide"></i>
          </div>
          <div class="item-content">
            <h3>绩效考核实施细则</h3>
            <p>绩效考核标准和流程说明</p>
          </div>
        </router-link>

        <router-link class="form-item" to="/main/renshi/jixiao/wjxiudinsqd">
          <div class="item-icon">
            <i class="el-icon-guide"></i>
          </div>
          <div class="item-content">
            <h3>文件新增修订废止申请单</h3>
            <p>绩效文件的新增修订废止申请</p>
          </div>
        </router-link>
        <router-link class="form-item" to="/main/renshi/jixiao/wjfafanghs">
          <div class="item-icon">
            <i class="el-icon-guide"></i>
          </div>
          <div class="item-content">
            <h3>文件发放与回收记录</h3>
            <p>绩效文件发的放与回收记录</p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<!-- <script>
export default {
mounted() {
    this.checkScrollbar();
    window.addEventListener('resize', this.checkScrollbar);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkScrollbar);
  },
  methods: {
    checkScrollbar() {
      const div = this.$refs.chart;
      if (document.body.scrollHeight > window.innerHeight) {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    }
  }
};
</script> -->
<style lang="scss" scoped>
.performance-container {
  min-height: 100vh;
  // background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    width: 800px;
    margin: 0px auto 25px auto;

    .back-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #409eff;
      font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .content-wrapper {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 24px;
    width: 800px;
    margin: 0px auto 0px auto;

    .section-header {
      text-align: center;
      margin-bottom: 40px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409eff, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 18px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 14px;
      }
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      width: 800px;
      margin: 0px auto;
      gap: 24px;
      // padding: 0 20px;

      .form-item {
        display: flex;
        align-items: center;
        text-decoration: none;
        background-color: #f5f7fa;
        border: 1px solid #ebeef5;
        border-radius: 8px;
        padding: 24px;
        transition: all 0.3s ease;

        .item-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 48px;
          height: 48px;
          background: linear-gradient(135deg, #409eff, #66b1ff);
          border-radius: 12px;
          margin-right: 16px;
          transition: all 0.3s ease;

          i {
            font-size: 24px;
            color: white;
          }
        }

        .item-content {
          flex: 1;

          h3 {
            margin: 0 0 8px;
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            transition: color 0.3s ease;
          }

          p {
            margin: 0;
            font-size: 13px;
            color: #909399;
          }
        }

        &:hover {
          transform: translateY(-5px);
          background-color: #ecf5ff;
          border-color: #409eff;
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);

          .item-icon {
            transform: scale(1.1);
          }

          .item-content h3 {
            color: #409eff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .performance-container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content-wrapper {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 24px;

        .section-title {
          padding: 8px 16px;

          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .form-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0;

        .form-item {
          padding: 16px;

          .item-icon {
            width: 40px;
            height: 40px;

            i {
              font-size: 20px;
            }
          }

          .item-content {
            h3 {
              font-size: 14px;
            }

            p {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>